import React, { useState, useCallback } from "react";
// 函数传递优化：
// 1. 函数引用地址浅比较 PureComponent React.memo
// 2. 函数单例化 每次调用的函数都是一样的地址，不是重新创建的
const Child = React.memo(function (props) {
    console.log("子组件渲染了 render ");
    return (
        <div>
            Child
            <button onClick={props.onClick}>点击子组件</button>
        </div>
    );
});
// 函数组件优化传入函数的两种方案
// 方案一
// 将函数写在组件外
// 方案二
// 将函数用useCallBack存储
// const fn = () => {
//     console.log("我点击了子组件的按钮");
// };
function App() {
    const [random, setRandom] = useState(0);
    // 在页面加载的时候执行一次，每次返回的函数都是一样的
    // 函数体缓存的作用
    const fn = useCallback(() => {
        console.log("我点击了子组件的按钮");
    }, []);

    return (
        <div>
            <p>随机数: {random}</p>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button>
            <Child
                // 每次render都会生成一个新的函数
                onClick={fn}></Child>
        </div>
    );
}

export default App;
